<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="1179px;"
  >
    <!-- 标题栏 -->
    <div class="title">
      <div>导出</div>
      <i class="iconfont icon-guanbi2fill" @click="dialogVisible = false"></i>
    </div>

   <div style="padding: 0 36px 30px 36px;">
     <!-- 字段选择区 -->
    <div class="field-selection">
      <el-checkbox-group v-model="selectedFields">
        <el-checkbox
          v-for="field in fields"
          :key="field.value"
          :label="field.value"
        >
          {{ field.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 操作按钮区（全选、重置、预览） -->
    <div class="button-group">
      <el-button @click="resetSelection">重置</el-button>
      <el-button @click="selectAll">全选</el-button>
      <el-button 
        type="primary" 
        @click="previewExport"
        :disabled="!hasSelectedFields"
      >预览</el-button>
    </div>

    <!-- 预览内容区 -->
    <div class="yl" v-if="previewVisible">
      <div v-for="field in previewFields" :key="field" class="preview-item">
        {{ getFieldLabel(field) }}：{{ getFieldValue(field) }}
      </div>
    </div>

    <!-- 确认操作区（取消、确定） -->
    <div class="confirm-buttons" v-if="previewVisible">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmExport">确定</el-button>
    </div>
   </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ExportDialog",
  data() {
    return {
      dialogVisible: false,
      previewVisible: false,
      selectedFields: [], // 选中的字段
      previewFields: [], // 预览显示的字段
      fields: [
        { label: "Title-题名", value: "title" },
        { label: "Author-作者", value: "author" },
        { label: "Organ-单位", value: "organ" },
        { label: "Source-文献来源", value: "source" },
        { label: "Keyword-关键词", value: "keyword" },
        { label: "ISSN-国际标准刊号", value: "issn" },
        { label: "Period-期", value: "period" },
        { label: "Fund-基金", value: "fund" },
        { label: "DOI-DOI", value: "doi" },
        { label: "Year-年", value: "year" },
        { label: "Volume-卷", value: "volume" },
        { label: "SrcDatabase-来源库", value: "srcDatabase" },
        { label: "Summary-摘要", value: "summary" },
        { label: "PubTime-发表时间", value: "pubTime" },
        { label: "FirstDuty-第一责任人", value: "firstDuty" },
        { label: "CLC-中图分类号", value: "clc" },
      ],
      exportData: {
        title: "超声在基层部队常见急诊中的临床价值",
        author: "袁鸣；王臻",
        organ: "中国人民解放军96608部队；空军军医大学",
        srcDatabase: "期刊",
        keyword: "军事训练；超声波",
        source: "文献来源示例",
      },
    };
  },
  computed: {
    // 判断是否有选中的字段
    hasSelectedFields() {
      return this.selectedFields.length > 0;
    }
  },
  methods: {
      openExportDialog() {
    this.dialogVisible = true;
    this.resetSelection(); // 重置状态
  },
    selectAll() {
      this.selectedFields = this.fields.map((field) => field.value);
    },
    resetSelection() {
      this.selectedFields = [];
      this.previewVisible = false;
      this.previewFields = []; // 清空预览字段
    },
    previewExport() {
      if (this.hasSelectedFields) {
        this.previewFields = [...this.selectedFields]; // 复制选中的字段到预览字段
        this.previewVisible = true;
      }
    },
    confirmExport() {
      const exportParams = {
        fields: this.selectedFields,
        data: this.exportData,
      };
      console.log("执行导出操作", exportParams);
      this.$message.success("导出成功");
      this.dialogVisible = false;
    },
    // 根据value获取字段label
    getFieldLabel(field) {
      return this.fields.find((item) => item.value === field)?.label || field;
    },
    // 根据字段名获取对应数据
    getFieldValue(field) {
      return this.exportData[field] || "";
    },
  },
};
</script>

<style lang="scss" scoped>
.yl {
  background: #f9faff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}
.preview-item {
    font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
color: #333333;
  margin-bottom: 20px;
}
::v-deep .el-checkbox {
  margin-bottom: 30px;
}
::v-deep .el-dialog__header {
  display: none;
}
::v-deep .el-dialog__body {
  // padding: 0 36px 30px 36px;
  padding: 0;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 26px;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 28px;
  div {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #333333;
  }
  i {
    font-size: 22px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
.field-selection {
  margin-bottom: 20px;
  border-bottom: 1px dashed #e4e4e4;
}
.button-group,
.confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
</style>
